<template>
	<Popup
		class="login-toy"
		title="请选择玩具"
		btnText="下一步"
		padding="34px 30px"
		btnMargin="54"
		@clickBtn="onclickNext"
		@close="$emit('close')"
	>
		<div class="toy-range">
			<div
				class="center"
				v-for="item in Toys"
				:key="item.id"
				@click="onclickSelect(item)"
			>
				<Button
					bgColor="#EFF3F3"
					width="180"
					height="180"
					:border="selectToys.indexOf(item.id)>-1 ? ' 3px solid #00c9a9' : ' 3px solid transparent'"
				>
					<img	:src="item.img">
				</Button>
				<p style="margin-top: 20px;">{{item.name}}</p>
			</div>
		</div>
	</Popup>
</template>

<script>
import Toys from '@/mock/toys'
export default {
  data() {
    return {
      Toys,
      selectToys: []
    }
  },
  methods: {
    onclickSelect(item) {
      const index = this.selectToys.indexOf(item.id)

      if (index > -1) {
        this.selectToys.splice(index, 1)
      } else {
        this.selectToys.push(item.id)
      }
    },
    onclickNext() {
      if (this.selectToys.length > 0) {
        /* 选择年龄也是改变role */
        this.$emit('nextStep', { toys: this.selectToys })
      }
    }
  }
}
</script>

<style lang='scss' scoped>
.login-toy {
  .toy-range {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 30px 24px;
    padding: 0 56px;
    margin-top: 48px;
    color: #003e34;
  }
}
</style>
